import React,{ useState } from 'react';

// 默认点击按钮修改 count，会导致无关组件被重新渲染，但是子组件又和这个数据没有任何联系
// 此时可以通过 React.memo 来解决无关组件调用的问题，React.memo 是一个高阶组件
// const Child = React.memo(()=>{
//   console.log('Child组件被执行了');
//   return (<div>
//     Child
//   </div>)
// })

let Child = ()=>{
  console.log('Child组件被执行了');
  return (<div>
    Child
  </div>)
}

Child = React.memo(Child)

const App = () => {
  const [count,setCount] = useState(100)
  return (
    <div>
      <h1>{count}</h1>

      <button onClick={()=>{
        setCount(count + 1)
      }}>加 1</button>

      <hr />
      {/*
        每次 count 发送改变的时候都会导致 Child 子组件被重新渲染
        但是 count 的改变实际上又跟 Child 子组件没有任何关系
        如果每次都重新渲染太过于浪费，所以有没有什么办法让 count 改变
        的时候不会重新渲染 Child 子组件了呢？
      */}
      <Child />
    </div>
  );
};

export default App;
